<div class="view list-view"
  @click="discardAll"
  @drag="drag"
  @dragend="dragend"
  @drop="drop"
  @dragleave="dragleave"
  @dragenter="dragenter"
  @dragover.prevent>

  <div class="view-title">
    <div class="list-brand">
      {{ list.name }}
    </div>

    <div class="list-timer-group" v-if="list.timerCurrent">
      <div class="list-timer-icon">
        <i class="material-icons">person</i>
      </div>
      <div class="timer-value-wrapper list-timer">
        <timer class="timer-left" :time="list.timerCurrent.left"></timer>
        <span class="timer-value-separator">/</span>
        <timer class="timer-value" :time="list.timerCurrent.value"></timer>
      </div>
    </div>

    <div class="list-timer-group" v-if="list.timerTotal && list.timerTotal.value > 0">
      <div class="list-timer-icon">
        <i class="material-icons">access_time</i>
      </div>
      <div class="timer-value-wrapper list-timer">
        <timer class="timer-left" :time="list.timerTotal.left"></timer>
        <span class="timer-value-separator">/</span>
        <timer class="timer-value" :time="list.timerTotal.value"></timer>
      </div>
    </div>
    <div class="list-actions">
      <template v-if="authorized">
        <button class="light" @click="editTimer">
          <i class="material-icons" title="Edit">edit</i>
        </button>
        <button class="light" @click="stop" v-show="list.timerCurrent && list.timerCurrent.active">
          <i class="material-icons" title="Pause">pause</i>
        </button>
        <button class="light" @click="start" v-show="list.ptr < list.seats.length && list.timerCurrent && list.timerCurrent.left > 0 && !list.timerCurrent.active">
          <i class="material-icons" title="Start">play_arrow</i>
        </button>
        <button class="light" @click="next" v-show="list.ptr < list.seats.length">
          <i class="material-icons" title="Next Speaker">skip_next</i>
        </button>
      </template>
      <button class="light" @click="project">
        <i class="material-icons" title="Update Cast">cast</i>
      </button>
    </div>
  </div>

  <div class="list list-seats" v-el:seats :class="{ 'ac-on-top': attachOnTop }">
    <div class="list-window-drag-handle"></div>
    <div class="list-item list-seat" v-for="seat of (dragMode ? dragList : list.seats)" track-by="uid"
      :class="{ dragging: dragging === seat, overlap: overlap === seat, bold: $index === list.ptr }"
      :draggable="authorized"
      @click.stop="edit(seat, $index)"
      @drag="drag"
      @dragstart="dragstart(seat, $index, $event)"
      transition="item">
      <div class="list-item-indicator"></div>
      <div class="list-item-content list-seat-edit"
        v-if="editTarget == seat.uid"
        @click.stop>

        <input class="list-seat-input" v-model="editInput"
          @keydown.tab.stop.prevent="performAC()"
          @keydown.enter="performEdit"
          @keydown.esc="discardAll"
          @keydown.down="moveACDown"
          @keydown.up="moveACUp"
          @input="updateAC"
          v-el:add-input>

        <i class="material-icons list-seat-input-icon">check</i>

        <div class="list-seat-ac">
          <div class="list-seat-ac-entry" v-for="entry of acList" @click="performAC(entry)" transition="autocompletion" stagger="100">
            <span class="ac-content">{{ entry }}</span>
          </div>

          <div class="list-seat-ac-indicator"
            :style="{ transform: indicatorTransform }">
            <i class="material-icons">keyboard_tab</i>
          </div>
        </div>
      </div>
      <div class="list-item-content list-drag" title="{{ seat.name }}" v-else>
        {{ seat.name }}
      </div>
    </div>

    <div class="list-item list-seat" v-show="addFlag" v-el:add-item>
      <div class="list-item-indicator"></div>
      <div class="list-item-content list-seat-edit" @click.stop>

        <input class="list-seat-input" v-model="editInput"
          @keydown.tab.stop.prevent="performAC()"
          @keydown.enter="performAddition"
          @keydown.esc="discardAll"
          @keydown.down="moveACDown"
          @keydown.up="moveACUp"
          @input="updateAC"
          v-el:add-input>

        <i class="material-icons list-seat-input-icon">check</i>

        <div class="list-seat-ac">
          <div class="list-seat-ac-entry" v-for="entry of acList" @click="performAC(entry)" transition="autocompletion" stagger="25">
            <span class="ac-content">{{ entry }}</span>
          </div>

          <div class="list-seat-ac-indicator"
            :style="{ transform: indicatorTransform }">
            <i class="material-icons">keyboard_tab</i>
          </div>
        </div>
      </div>
    </div>

    <div class="list-item clickable list-seat-add" @click.stop="add" v-if="authorized">
      <div class="list-item-indicator"></div>
      <div class="list-item-content">
        <i class="material-icons">add</i> 添加
      </div>
    </div>
  </div>
  <div class="dialog-overlap" transition="opacity" v-show="editTimerFlag" @click="editTimerFlag = false">
    <div class="dialog" @click.stop.prevent>
      <div class="dialog-title">
        修改时长
      </div>
      <div class="dialog-content">
        <div class="timer-input-hint">总时长 ( 0 = 不限 )</div>
        <timer-input :time.sync="totTime"></timer-input>
        <div class="timer-input-hint">每名代表</div>
        <timer-input :time.sync="eachTime"></timer-input>
        <button @click="performTimerEdit" class="confirmation-btn">
          提交
          <i class="material-icons">keyboard_arrow_right</i>
        </button>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>
